<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Copyright (c) 2007. Adobe Systems Incorporated. All rights reserved. -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Submit forms with XHR</title>
<link href="../../css/samples.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.product {
	cursor: pointer;
}
.hover {
	background-color: #FFFFCC !important;
}
.selected {
	background-color: #CCCCCC;
}
</style>
<script src="../../includes/SpryData.js" type="text/javascript"></script>
<script src="../../includes/SpryUtils.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
//
// Callback function that will update the response_form1 div with the response that comes from the server
//
	function updateResponseDiv(req) 
	{
		Spry.Utils.setInnerHTML('response_form1', req.xhRequest.responseText);
	}

//-->
</script>
</head>

<body>
<h3>Submit forms without page refresh</h3>
<p>This page demonstrates how to use Spry to submit a form without refreshing the current page.</p>
<p>It requires PHP scripting enabled on the server.</p>
<p>These are a few samples on how to change a default submit (that uses a page rountrip to server) to an ajax-enabled submit that doesn't refresh the page.</p>

<hr />
<table width="100%" border="0">
	<tr>
		<td width="21%" valign="top">
			Here's a form with all types of fields: <br/><br/>
			<form id="form1" name="form1" method="post" action="SubmitChecker.php" onsubmit="return Spry.Utils.submitForm(this, updateResponseDiv)">
					<table>
						<tr>
								<td>TextField:</td>
								<td><input name="textfield" type="text" value="Text Field Value"/></td>
						</tr>
						<tr>
								<td>Password:</td>
								<td><input name="passfield" type="password" value="password12"/></td>
						</tr>
						<tr>
								<td>Hidden:</td>
								<td><input name="hiddenfied" type="hidden" value="Hidden Field Value"/></td>
						</tr>
						<tr>
								<td>Textarea:</td>
								<td>
								<textarea name="textarea" cols="35" rows="4">Textarea content goes here
One more line
And more..</textarea>
								</td>
						</tr>
						<tr>
								<td>Simple select:</td>
								<td>
								<select name="simpleselect">
									<option value="">Please select</option>
									<option value="5">five</option>
									<option value="4">four</option>
									<option value="3">three</option>
									<option value="2">two</option>
									<option value="1">one</option>
								</select>
							</td>
						</tr>						
						<tr>
								<td>Multiple select:</td>
								<td>
								<select name="multipleselect[]" multiple="multiple">
									<option value="">Please select</option>
									<option value="5">five</option>
									<option value="4">four</option>
									<option value="3">three</option>
									<option value="2">two</option>
									<option value="1">one</option>
								</select>
							</td>
						</tr>
				    <tr>
				      <td>Checkboxes:</td>
				      <td> 
				        1  <input type="checkbox" name="checkboxes[]" id="checkbox_1" value="1" checked="checked"/> &nbsp;
				        2  <input type="checkbox" name="checkboxes[]" id="checkbox_2" value="2"/> &nbsp;
								3  <input type="checkbox" name="checkboxes[]" id="checkbox_3" value="3" checked="checked"/> &nbsp;
								4  <input type="checkbox" name="checkboxes[]" id="checkbox_4" value="4" checked="checked"/> &nbsp;
								5  <input type="checkbox" name="checkboxes[]" id="checkbox_5" value="5"/>
				      </td>
				    </tr>
				    <tr>
					      <td>Radio Buttons:</td>
					      <td> 
					        1  <input type="radio" name="radio" id="radio_1" value="1"/> &nbsp;
					        2  <input type="radio" name="radio" id="radio_2" value="2"/> &nbsp;
									3  <input type="radio" name="radio" id="radio_3" value="3"/> &nbsp;
									4  <input type="radio" name="radio" id="radio_4" value="4"/> &nbsp;
									5  <input type="radio" name="radio" id="radio_5" value="5"/>
					      </td>
				    </tr>				    
						<tr>
								<td>Button:</td>
								<td><input name="button" type="button" value="Button"/></td>
						</tr>
						<tr>
								<td colspan="2">
										<br/>
										<input type="submit" value="Submit"/>
										<input type="reset" value="Reset"/>
								</td>
						</tr>
					</table>
			</form>				
		</td>
		<td width="2%"></td>
	  <td width="79%" valign="top">
	  		Here's the response from the server: <br/>
				<div id="response_form1"></div>	
	  </td>
  </tr>
</table>

<hr/>

<form id="form2" name="form2" action="#">

<p>Notes:</p>
	<ul>
		<li>Change the default browser submit to an Ajax-enabled submit by setting onSubmit handler to Spry.Utils.submitForm(form, callback):
<pre>
 &lt;form name=&quot;form1&quot; method=&quot;post&quot; action=&quot;SubmitChecker.php&quot; 
 		onsubmit=&quot;return Spry.Utils.submitForm(this, updateResponseDiv);&quot;&gt;
 ...
// where the success callback:
function updateResponseDiv(req) 
{
	// do something with the response from the server
} 
</pre>
		</li>
		<li>
			The form can be submitted using either GET or POST, but the default method and url are taken from the form attributes: &quot;method&quot; / &quot;action&quot;.
			Both method and submit url can be overwritten by passing the optional arguments: <br/>
<pre>
onsubmit=&quot;return Spry.Utils.submitForm('form1', updateResponseDiv, {method:'get', url:'AjaxSubmitChecker.php'});&quot;
</pre>
			<input type="button" name="test2" value="Test it!" onclick="Spry.Utils.submitForm('form1', updateResponseDiv, {method:'get', url:'AjaxSubmitChecker.php'});"/>
		</li>
		<li>Forms that have enctype=&quot;multipart/form-data&quot; are submitted using the default browser behavior (no ajax submit!).</li>
		<li>
			By default all the fields in the form are submitted, except for file fields, buttons and reset buttons.<br/>
			If only a custom list of fields is required to be submitted to the server, pass the 'elements' list as an optional argument to the Spry.Utils.submitForm function:
<pre>
onsubmit=&quot;return Spry.Utils.submitForm('form1', updateResponseDiv, {elements: ['textfield', 'simpleselect']});&quot;
</pre>
			<input type="button" name="test2" value="Test it!" onclick="Spry.Utils.submitForm('form1', updateResponseDiv, {elements: ['textfield', 'simpleselect']});"/>
		</li>
		<li>
				Additional data can be send to the server by passing an 'additionalData' string that contains 'key=value' encoded parameters:
<pre>
onsubmit=&quot;return Spry.Utils.submitForm('form1', updateResponseDiv, 
	{url:'AjaxSubmitChecker.php', additionalData:'ajaxSubmit=true&amp;from=samples'});&quot;
</pre>
			<input type="button" name="test2" value="Test it!" onclick="Spry.Utils.submitForm('form1', updateResponseDiv, {url:'AjaxSubmitChecker.php', additionalData:'ajaxSubmit=true&amp;from=samples'});"/>
		</li>
		
	</ul>
</form>

</body>
</html>
 
